/*
 * @Author: xiaobai123-4 1713951641@qq.com
 * @Date: 2025-03-27 10:14:20
 * @LastEditors: xiaobai123-4 1713951641@qq.com
 * @LastEditTime: 2025-04-01 11:38:46
 * @FilePath: \electronicBulletinBoard\src\components\PDFViewer.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect } from 'react';
import { Resizable } from 'react-resizable';
// , { useState }
import { Box, Button } from '@mui/material';
import GridViewIcon from '@mui/icons-material/GridView';
import { Worker } from '@react-pdf-viewer/core';
// Import the main component
import { Viewer, SpecialZoomLevel } from '@react-pdf-viewer/core';
import { fullScreenPlugin } from '@react-pdf-viewer/full-screen';
import { zoomPlugin } from '@react-pdf-viewer/zoom';
// Import the styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/full-screen/lib/styles/index.css';
import '@react-pdf-viewer/drop/lib/styles/index.css';
import '@react-pdf-viewer/zoom/lib/styles/index.css';

export default function App({ folderUrl, renderKey }) {

    const zoomPluginInstance = zoomPlugin({
        scaleStep: 0.2, // 设置缩放步长为10%
        minScale: 0.5, // 最小缩放比例50%
        maxScale: 3 // 最大缩放比例300%
    });

    // 添加监听renderKey变化的effect
    useEffect(() => {
        // zoomTo(SpecialZoomLevel.ActualSize);
        zoomTo(SpecialZoomLevel.PageFit);
        // zoomTo(SpecialZoomLevel.PageWidth);
    }, [renderKey]); // 当renderKey变化时触发

    const fullScreenPluginInstance = fullScreenPlugin({
        renderExitFullScreenButton: ({ onClick }) => {
            return (
                <div style={{
                    position: 'fixed',
                    top: '2px',
                    left: '2px',
                    width: '100%',
                    zIndex: '999'
                }}>
                    <Button
                        color="primary"
                        onClick={onClick}
                    >
                        退出全屏
                    </Button>
                </div>
            );
        },
        onEnterFullScreen: (zoom) => zoom(SpecialZoomLevel.PageFit),
        onExitFullScreen: (zoom) => zoom(SpecialZoomLevel.PageFit),
    });

    const { EnterFullScreenButton } = fullScreenPluginInstance;
    // 从插件实例中获取按钮组件
    const { ZoomInButton, ZoomOutButton, ZoomPopover, zoomTo } = zoomPluginInstance;

    return (
        <Resizable
            width={600}
            height={40}
        >
            <Worker workerUrl="script/pdf.worker.min.js" style={{
                width: '100%',
                height: '100%',
                display: 'flex',
                flexDirection: 'column'
            }}>
                <Box
                    sx={{
                        padding: '8px',
                        zIndex: 1,
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        backgroundColor: '#f0f0f0',
                        borderBottom: '1px solid #ddd',
                        boxSizing: 'border-box',  // 确保内边距和边框不会增加元素的总宽度和高度
                        borderRadius: '4px 4px 0 0',  // 圆角效果，只保留顶部的圆角
                        height: 48  // 明确按钮容器高度
                    }}>
                    <GridViewIcon className="react-grid-drag-box" sx={{ color: '#000' }} />
                    <div style={{ color: '#000' }}>文件名称</div>
                    <div style={{ display: 'flex', gap: 8 }}>
                        <ZoomOutButton />
                        <ZoomPopover />
                        <ZoomInButton />
                        <EnterFullScreenButton />
                    </div>
                </Box>
                <Box style={{
                    width: '100%',
                    height: 'calc(100% - 48px)',
                    flex: 1,
                }}>
                    <Viewer
                        fileUrl={folderUrl}
                        plugins={[fullScreenPluginInstance, zoomPluginInstance]}
                    />
                </Box>
            </Worker>
        </Resizable>
    );
}